<template>
  <div>
    <l-header :sliderShow="false" :backShow="true" :backUrl="'OnlineAddress'"></l-header>
    <div class="w89">
      <h2 class="title">{{$t('local.OnlineRemit.5636x8ggq8c0')}}</h2>
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.chargeCurrency"
          :name="$t('login.index.5638rr393s40')+$t('local.OnlineRemit.5636x8ggs0o0')"
          :label="$t('local.OnlineRemit.5636x8ggs0o0')"
          readonly
          clickable
          :placeholder="$t('local.OnlineRemit.5636x8ggs0o0')"
          required
          :rules="[{ required: true, message: $t('login.index.5638rr393s40')+ $t('local.OnlineRemit.5636x8ggs0o0') }]"
          @click="showPicker = true"
        >
        <template #input>
                <p v-show="form.chargeCurrency?false:true">{{$t('login.index.5638rr393s40')+$t('local.OnlineRemit.5636x8ggs0o0')}}</p>
                <select v-model="form.chargeCurrency">
                    <option style="display:none" value="" disabled>{{$t('login.index.5638rr393s40')}}</option>
                    <option :value="item" v-for="(item,index) in columns" :key="index">{{item}}</option>
                </select>
                <van-icon name="arrow-down" />
            </template>
        </van-field>
        <van-field
          v-model="form.chargeAmount"
          :name="$t('login.index.5638rk3g0080')+$t('local.OnlineRemit.5636x8ggs9g0')"
          :label="$t('local.OnlineRemit.5636x8ggs9g0')"
          required
          type="number"
          :placeholder="$t('login.index.5638rk3g0080')+$t('local.OnlineRemit.5636x8ggs9g0')"
          clearable
          :rules="[
              { required: true, message:$t('login.index.5638rk3g0080')+$t('local.OnlineRemit.5636x8ggs9g0') },
              { pattern:/(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0){1}$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/, message:$t('local.OnlineRemit.5636x8ggs9g0')+$t('local.OnlineRemit.56ar0dd8k500') }
          ]"
        />
        <van-field
          v-model="form.bankName"
          :name="$t('login.index.5638rk3g0080')+$t('local.OnlineRemit.56r2nifh1vs0')"
          :label="$t('local.OnlineRemit.56r2nifh1vs0')"
          required
          :placeholder="$t('login.index.5638rk3g0080')+$t('local.OnlineRemit.56r2nifh1vs0')"
          clearable
          :rules="[
              { required: true, message:$t('login.index.5638rk3g0080')+$t('local.OnlineRemit.56r2nifh1vs0') },
          ]"
        />
        <bankCard :val.sync="form.chargeAccount" :title="$t('local.OnlineRemit.5636x8ggt7s0')" :required="true"></bankCard> 
        <uploader :val.sync="form.chargeVoucher" :list="uploadList"></uploader>
        <div class="tip" v-if="branchList['bottom_tip_'+langSuff]==''?false:true">
          {{branchList['bottom_tip_'+langSuff]}}
        </div>       
        <van-button type="info" block class="next-step" native-type="submit"
          >{{$t('local.OnlineRemit.5636x8ggu5g0')}}</van-button
        >
      </van-form>
    </div>
  </div>
</template>
<script>
import {  submitList} from '@/api/common'
import uploader from '@/components/uploader'
import bankCard from '@/components/bankCard'
export default {
  components:{
      uploader,bankCard
  },
  inject: ['branch','StepsPage','user_fill'],
  name: "",
  computed: {
     StepsPageList(){
        return this.StepsPage()
    },
    user_fill_list(){
        return this.user_fill()
    },
    uploadList() {
      var list = {
        title_zh: this.$t('local.OnlineRemit.5636x8gguf40'),
        title_en: this.$t('local.OnlineRemit.5636x8gguf40'),
        title_tc: this.$t('local.OnlineRemit.5636x8gguf40'),
        is_require: 1,
        type: "upload",
        name: "upload",
      };
      return list;
    },
    langSuff(){
        return  this.$store.state.langSuff
    },
    branchList(){
     var list  = this.branch()?.local || []
      if(list.length){
        return list[1]
      }
      return list;
    }
  },
  data() {
    return {
      columns: ["HKD"],
      form: {
        chargeCurrency: "",
        chargeAmount: "",
        bankName:"",
        chargeAccount: "",
        chargeVoucher: [],
      },
      showPicker: false,
      cardZShow: false,
    };
  },
  created() {
  },
  methods: {
    onSubmit() {
      this.loading=true;
      var { curr_id  } =  this.StepsPageList;
      var obj = Object.assign({}, 
              { pageId:curr_id  , 
              fields :Object.assign({},this.form,{legalizeType:2}) 
             })
      var _this  =this;
      this.$dialog.confirm({
        message: this.$t('local.OnlineRemit.5636x8ggunw0'),
        confirmButtonText:this.$t('local.OnlineRemit.56r2nifh1vs01'),//确认按钮文案
        cancelButtonText:this.$t('local.OnlineRemit.56r2nifh1vs02'),//取消按钮文案
      })
      .then(() => {
        // on confirm
        this.submitList(obj)
        
      })
      .catch(() => {
        // on cancel
      });
    },
    submitList(obj){
      submitList(obj)
      .then(res=>{
          if(res.code==1 || res.code==105){
              this.$nextPage({pageId:this.StepsPageList.next_id})
              .then(next=>{
                  this.loading = false;
              })
          }else{
              this.loading = false;
              this.$toast(res.msg)
          }
      })
      .catch((res)=>{
          this.loading = false;
      })
    },
    onConfirm(chargeCurrency) {
      this.form.chargeCurrency = chargeCurrency;
      this.showPicker = false;
    },
    afterRead(file) {
      this.cardZShow = true;
      setTimeout(() => {
        this.cardZShow = false;
        this.form.cardZ = file.content;
      }, 1000);
    },
  },
  watch:{
    user_fill_list:{
        handler(list,old){
            var { chargeCurrency ,chargeAmount , bankName , chargeAccount ,  chargeVoucher } = list;
            this.form={}
            this.$forceUpdate();
            this.form = {chargeCurrency ,chargeAmount, bankName , chargeAccount ,  chargeVoucher }
        },
        immediate:true,
        deep:true
    }
  }
};
</script>
<style lang="less" scoped>
.tip {
  font-size: 0.22rem;
  color: @placeColor;
  padding: 0 0.3rem;
}
.van-cell{
        p{
            position: absolute;
            top: 0;
            left:0;
            width: 100%;
            height: 100%;   
            overflow: hidden;
        }
    }
    select:focus{outline:none;}
    select::-ms-expand { display: none; }
    select{
        position: relative;
        z-index: 2;
        width: 100%;
        display: block;
        border:none;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
        background: transparent;
        padding-right: 0.4rem;
    }
</style>